<!-- 产品 -->
<template>
    <div class="view-page">
        <section class="down-head">
            <img class="header_img" src="../../assets/images/bounty/download/faa2bbb36f40ee90543ac4200dd8c67c.jpg"
                alt="">
            <div class="header_content">
                <div class="header_content_inner">
                    <div class="header_t1">Join Harvest Gain</div>
                    <div class="header_t2">Unlock a New Era of Healt and</div>
                    <div class="header_t3">
                        Enhance your immunity, protect your health, and contribute to
                        society. Download now for dual rewards ofwealt, ind well-belng.
                    </div>
                </div>
            </div>
        </section>
        <section class="down-summary">
            <div class="summary_box">
                <div class="summary_info">
                    <div class="summary_img_box">
                        <img class="summary_img"
                            src="../../assets/images/bounty/download/photo_6053228294993284109_y.jpg" alt="">
                    </div>
                    <div class="download-btn">
                        <img class="summary_img" @click="toApple"
                            src="../../assets/images/bounty/download/photo_6053228294993284107_y.jpg" alt="">
                    </div>
                </div>
                <div class="summary_info">
                    <div class="summary_img_box">
                        <img class="summary_img"
                            src="../../assets/images/bounty/download/photo_6053228294993284108_y.jpg" alt="">
                    </div>
                    <div class="download-btn">
                        <img class="summary_img" @click="toGoogle"
                            src="../../assets/images/bounty/download/photo_6053228294993284106_y.jpg" alt="">
                    </div>
                </div>
            </div>
        </section>
        <section class="down-product">
            <div>
                <p style="font-size: 48px; font-weight: 700">Already</p>
                <p style="font-size: 48px; font-weight: 700">downloaded?</p>
                <p class="download-description" style="margin-top: 15px; font-weight: 700">Learn more about what you can
                    do or HGBC
                </p>
            </div>
            <div class="product-list">
                <div class="product-item" v-for="(item, index) in productArr" :key="index" @click="handlerJump(item)">
                    <img :class="{ 'product-img': true, 'product-0': index === 0 }" :src="item.img" alt="">
                    <div class="product-data">
                        <p class="product-description" style="margin-top:10px;">{{ item.description }}
                        </p>
                    </div>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import contentBanner from "@/components/content-banner/index.vue";
import Instagram from "@/components/instagram/index.vue";

export default {
    name: "aboutUs",
    components: {
        contentBanner,
        Instagram,
    },
    data() {
        return {
            productArr: [
                {
                    img: require("../../assets/images/bounty/product/product1.png?v=1"),
                    name: "ALWAYS INNOVATING",
                    description:
                        "your health, but also contributing to society with love",
                    path: '/category',
                    query: { 'categoryId': 14 }
                },
                {
                    img: require("../../assets/images/bounty/product/product2.png"),
                    name: "HALF A CENTURY",
                    description:
                        "Vine Tea, nourishing your body while supporting Harvest Gain's charitable mission, bringing health",
                    path: '/category',
                    query: { 'categoryId': 16 }
                },
                {
                    img: require("../../assets/images/bounty/product/product3.png"),
                    name: "ROBUST OFFERINGS",
                    description:
                        "Give back with every step - Support our charity project and help build a healthier, kinder world",
                    path: '/blogList'
                },
            ],
            productArr2: [
                {
                    img: require("../../assets/images/bounty/us-list-1.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-2.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-3.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-4.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-5.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-6.webp"),
                },
                {
                    img: require("../../assets/images/bounty/us-list-7.webp"),
                },
            ],
            images: [
                {
                    image: require("../../assets/images/bounty/AdvMagGly.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",
                },
                {
                    image: require("../../assets/images/bounty/us-list-1.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",
                },
                {
                    image: require("../../assets/images/bounty/us-list-2.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",
                },
                {
                    image: require("../../assets/images/bounty/us-list-4.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",
                },
                {
                    image: require("../../assets/images/bounty/us-list-5.webp"),
                    title: "Advanced Magnetic Glycolics",
                    info: "your heart health and prevent heart disease.",
                },
            ],
        };
    },
    methods: {
        toAllProduct() {
            this.$router.push({
                path: "/allProduct",
            });
        },
        toApple() {
            window.location.href = 'https://i.diawi.com/mnYZzH'
        },
        toGoogle() {
            window.location.href = 'https://i.diawi.com/EuVj2Y'
        },
        handlerJump(item) {
            this.$router.push({
                path: item.path,
                query: item.query ? item.query : {}
            })
        }
    },
};
</script>
<style scoped lang="less">
@media (min-width: 768px) {
    .down-product {
        flex-direction: column;
        gap: 50px;

        p {
            text-align: center !important;
            margin: 10px 0;
        }
    }

    .product-description,
    .download-description {
        font-size: 30px;
    }

    .summary_box {
        gap: 0 !important;
    }

    .down-summary .summary_box .summary_info .download-btn img {
        width: 250px !important;
    }

}

@media (min-width: 1680px) {
    .down-product {
        flex-direction: row;
    }

    .product-description,
    .download-description {
        font-size: 16px;
    }

    .summary_box {
        gap: 80px;
    }

    .down-summary .summary_box .summary_info .download-btn img {
        width: 160px;
    }
}

.down-head {
    width: 100%;
    height: 600px;
    background: #27463a;
    position: relative;

    .header_img {
        position: absolute;
        top: 0;
        bottom: 0;
        right: 0;
        left: 0;
        height: 100%;
        width: 100%;
    }

    .header_content {
        background: linear-gradient(90deg,
                rgba(39, 70, 58, 1),
                rgba(52, 119, 63, 0) 100%);
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;

        width: 100%;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;

        .header_content_inner {
            width: 75%;
            z-index: 1;
            padding-top: 80px;
            padding-bottom: 80px;
            font-weight: 500;
            font-family: "sofia-pro", Montserrat, sans-serif;

            .header_t1 {
                font-size: 16px;
                font-weight: 600;
                line-height: 20px;
                margin-bottom: 12px;
                color: #ffffff;
            }

            .header_t2 {
                color: #f1e5d4;
                font-size: 2.8125rem;
                line-height: 3.4375rem;
            }

            .header_t3 {
                color: #ffffff;
                font-size: 1.5rem;
                line-height: 2.25rem;
                margin-top: 20px;
            }
        }
    }
}

.down-product {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 70px;
}

.product-list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: nowrap;
    align-items: flex-start;
    gap: 30px;

    .product-item {
        width: 272px;
        // height: 272px;
        position: relative;
        cursor: pointer;
        overflow: hidden;

        .product-img {
            height: 272px;
            width: 272px;
            object-fit: cover;
            transition: transform 0.3s ease;
            display: flex;
        }

        .product-img:hover {
            transform: scale(1.05);
        }
    }
}

.down-summary {
    background: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 345px;

    .summary_box {
        width: 100%;
        max-width: 1400px;
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: center;
        grid-gap: 80px;
        gap: 80px;
        margin-top: 40px;


        .summary_info {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            width: 100%;
            flex-grow: 1;

            .download-btn {
                width: 100%;
                margin-bottom: 40px;
                display: flex;
                justify-content: center;

                img {
                    width: 160px;
                }
            }

            .summary_img_box {
                width: 100%;
                align-items: center;
                display: flex;
                // margin-bottom: 20px;

                .summary_img {
                    width: 100%;
                    height: auto;
                }
            }

            .summary_data {
                .summary_title {
                    font-size: 30px;
                    font-weight: 800;
                    letter-spacing: -0.27px;
                    line-height: 34px;
                }

                .summary_important {
                    font-size: 30px;
                    font-weight: 800;
                    letter-spacing: -0.27px;
                    line-height: 34px;
                }

                .summary-description {
                    margin-top: 25px;

                    p {
                        color: #000000;
                        font-weight: 500;
                        font-size: 16px;
                        margin: 12px 0;
                        line-height: 32px;
                    }
                }
            }
        }
    }
}
</style>
